<template>
    <el-empty v-if="_cardlist.length == 0" class="dataset-cards-empty" />
    <div v-if="_cardlist.length > 0" class="dataset-cards-container">
        <div v-for="(card, cindex) in _cardlist" class="dataset-card">
            <div class="dataset-name">{{ card.dataset_name }}数据集</div>
            <div class="dataset-dir">{{ card.dataset_dir }}</div>
            <div class="dataset-tags">
                <el-tag class="dataset-tag" type="primary">{{ card.dataset_supertype }}</el-tag>
                <el-tag class="dataset-tag" type="primary">{{ card.dataset_type }}</el-tag>
                <el-tag class="dataset-tag" type="danger">{{ card.label_format }}</el-tag>
            </div>
            <el-progress v-if="card.downloading" :percentage="card.download_percent" class="dataset-progress" />
            <div v-if="!card.downloading" class="dataset-footer">
                <div class="dataset-footer-item">样本介绍: {{ card.dataset_desc }}</div>
                <div class="dataset-footer-item">样本总量: {{ card.total_samples }}</div>
                <div class="dataset-footer-item">更新时间: {{ card.update_time }}</div>
            </div>
            <div v-if="!card.downloading" class="download-btn">
                <el-button type="primary" :icon="Download" @click="handleDownload(card)">下载数据</el-button>
            </div>
            <div class="more-btn">
                <el-tooltip content="更多" placement="bottom" effect="light">
                    <el-dropdown trigger="click">
                        <el-button link type="primary" size="large">
                            <MoreFilled class="more-icon" />
                        </el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item :icon="InfoFilled" @click="handleView(card)"> 预览 </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </el-tooltip>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, inject } from 'vue';
import API from '@/js/api';
import { Download, InfoFilled, MoreFilled } from '@element-plus/icons-vue';

let vueApp = inject('vueApp');
const emit = defineEmits([]);

// 模型卡片列表属性
let _cardlist = ref([]);

async function getDatasetsCloudList(dataset_supertype, dataset_type) {
    // 显示加载中，并调用本地服务
    const loading = ElLoading.service({
        lock: true,
        text: '加载中...',
        background: 'rgba(0, 0, 0, 0.7)'
    });

    // 读取云端数据集接口
    let algo_type = vueApp.getAlgoType();
    console.log('algo_type = ', algo_type);
    let result = await API.invoke('GetDatasetCloudList', {
        dataset_supertype: algo_type.supertype,
        dataset_type: algo_type.type
    });
    loading.close();

    // console.log(result);
    if (result.code == 0) {
        _cardlist.value = result.msg.map((item) => {
            return { ...item, downloading: false, download_percent: 0 };
        });
    }
}

async function handleDownload(card) {
    console.log('handleDownload card = ', card);
    // 接收远程ssh命令执行输出并展示
    await API.stopAsyncPolling();
    API.asyncTaskPolling(`dataset_cloud:${card.id}`, onDownloadCallback, 200, null, true);

    // 调用远程下载数据集接口
    let result = await API.invoke('DownloadDataset', {
        dataset_info: JSON.stringify(card)
    });
    // console.log(result);
    if (result.code != 0) {
        ElMessage.error(result.msg);
    } else {
        ElNotification({
            title: '提示',
            message: `数据集${card.id}下载成功`,
            type: 'info',
            duration: 1500,
            border: true
        });
    }

    // 重置下载状态
    await API.stopAsyncPolling();
    card.downloading = false;
    card.download_percent = 0;
}

async function onDownloadCallback(task_id, message) {
    let dataset_id = task_id.replace(/^dataset_cloud:/, '');
    let card = _cardlist.value.find((item) => {
        return item.id == dataset_id;
    });
    if (message.event == 'download') {
        console.log(`onDownloadCallback task_id=${task_id}, message = `, message);
        card.downloading = true;
    } else if (message.event == 'download_percent') {
        card.download_percent = parseFloat(message.data);
    } else {
        console.warn(`onDownloadCallback unknown event = ${message.event}`, message);
    }
}

function handleView(card) {
    console.log('handleView card = ', card);
}

onMounted(async () => {
    await getDatasetsCloudList();
});

defineExpose({ getDatasetsCloudList });

</script>

<style scoped>
.dataset-cards-empty {
    width: 100%;
}

.dataset-cards-container {
    display: flex;
    flex-wrap: wrap;
    padding: 2px 6px 2px 6px;
    background-color: rgb(249, 248, 248);
    overflow: auto;
    width: 100%;
}

.dataset-card {
    position: relative;
    flex: 0 0 calc(50% - 10px);
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 2px 2px rgba(229, 229, 232, 0.5);
    margin: 0px 5px 10px 5px;
    padding: 20px 15px 5px 20px;
    height: 180px;
    overflow-wrap: break-word;
    word-break: break-word;
    box-sizing: border-box;
}

.dataset-name {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 5px;
    white-space: nowrap;
}

.dataset-dir {
    color: gray;
    font-size: 14px;
    margin-bottom: 10px;
    white-space: nowrap;
}

.dataset-tags {
    margin: 5px 0px 8px 0px;
}

.dataset-tag {
    margin-right: 5px;
}

.dataset-footer {
    display: block;
    white-space: nowrap;
    color: rgb(150, 150, 152);
}

.dataset-footer-item {
    font-size: 12px;
    margin: 3px;
}

.download-btn {
    position: absolute;
    right: 15px;
    bottom: 12px;
}

.more-btn {
    position: absolute;
    right: 20px;
    top: 15px;
}

.more-icon {
    padding: 2px 2px 0px 0;
    width: 1.4em;
    height: 1.4em;
    color: rgb(18, 136, 227);
    font-weight: 700;
}

.dataset-progress {
    margin-top: 30px;
}
</style>
